window.addEventListener('load', function() {
    var text = document.querySelector('.input');
    var submit = document.querySelector('.submit');

    text.addEventListener('focus', function() {
        this.className = 'input-focus';
        submit.style.borderColor = '#ff6700';
        this.style.color = '#333';
    })
    text.addEventListener('blur', function() {
        this.className = 'input';
        submit.style.borderColor = '#ccc';
        this.style.color = '#999';
    })

    document.addEventListener('keyup', function(e) {
        if (e.keyCode === 83) {
            text.focus();

        }
    })
    var ai1 = document.querySelector('.ai1');
    var ai2 = document.querySelector('.ai2');
    var ai3 = document.querySelector('.ai3');
    var jsc1 = document.querySelector('.jsc1');
    var jsc2 = document.querySelector('.jsc2');
    var jsc3 = document.querySelector('.jsc3');
    var jsc4 = document.querySelector('.jsc4');
    var jsc5 = document.querySelector('.jsc5');
    var jsc6 = document.querySelector('.jsc6');
    var jsc7 = document.querySelector('.jsc7');
    var jsc8 = document.querySelector('.jsc8');
    ai1.addEventListener('mouseover', function() {
        ai1.className = 'change1';
        ai2.className = 'change2';
        ai3.className = 'change2';
    })
    ai2.addEventListener('mouseover', function() {
        ai2.className = 'change1';
        ai1.className = 'change2';
        ai3.className = 'change2';
    })
    ai3.addEventListener('mouseover', function() {
        ai3.className = 'change1';
        ai1.className = 'change2';
        ai2.className = 'change2';
    })


    jsc1.addEventListener('mouseover', function() {
        jsc1.className = 'change1';
        jsc2.className = 'change2';
    })
    jsc2.addEventListener('mouseover', function() {
        jsc1.className = 'change2';
        jsc2.className = 'change1';
    })
    jsc3.addEventListener('mouseover', function() {
        jsc3.className = 'change1';
        jsc4.className = 'change2';
    })
    jsc4.addEventListener('mouseover', function() {
        jsc3.className = 'change2';
        jsc4.className = 'change1';
    })

    jsc5.addEventListener('mouseover', function() {
        jsc5.className = 'change1';
        jsc6.className = 'change2';
    })
    jsc6.addEventListener('mouseover', function() {
        jsc5.className = 'change2';
        jsc6.className = 'change1';
    })

    jsc7.addEventListener('mouseover', function() {
        jsc7.className = 'change1';
        jsc8.className = 'change2';
    })
    jsc8.addEventListener('mouseover', function() {
        jsc7.className = 'change2';
        jsc8.className = 'change1';
    })

    var show = document.querySelector('.show');
    var upon = document.querySelector('.upon');
    var fixed = document.querySelector('.fixed');
    var fixedChange = document.querySelector('.fixedChange');
    var showTop = show.offsetTop;
    // console.log(showTop);
    document.addEventListener('scroll', function() {
        // console.log(window.pageYOffset);
        if (window.pageYOffset >= showTop) {
            fixed.className = 'fixedChange';
            upon.style.display = 'block';
        } else {
            fixed.className = 'fixed';
            upon.style.display = 'none';
        }
    })

    upon.addEventListener('click', function() {
        window.scroll(0, 0);
    })


    var prev = document.querySelector('.prev');
    var isClick = true;
    prev.addEventListener('click', function() {
        if (isClick) {
            isClick = false;
            console.log("asdasd");
            setTimeout(function() {
                isClick = true;
            }, 1000);

        }
    })

    var ab = document.querySelector('.ab');
    var more1 = document.querySelector('.more1');
    ab.addEventListener('mouseover', function() {
        ab.className = 'abChange';
        more1.className = 'more1Change';
    })
    ab.addEventListener('mouseout', function() {
        ab.className = 'ab';
        more1.className = 'more1';
    })
    more1.addEventListener('mouseover', function() {
        ab.className = 'abChange';
        more1.className = 'more1Change';
    })
    more1.addEventListener('mouseout', function() {
        ab.className = 'ab';
        more1.className = 'more1';
    })



    var ab2 = document.querySelector('.ab2');
    var more2 = document.querySelector('.more2');
    ab2.addEventListener('mouseover', function() {
        ab2.className = 'abChange';
        more2.className = 'more1Change';
    })
    ab2.addEventListener('mouseout', function() {
        ab2.className = 'ab2';
        more2.className = 'more2';
    })
    more2.addEventListener('mouseover', function() {
        ab2.className = 'abChange';
        more2.className = 'more1Change';
    })
    more2.addEventListener('mouseout', function() {
        ab2.className = 'ab';
        more2.className = 'more2';
    })

    // 视频播放
    var items1 = document.querySelector('.video-item1');
    var items2 = document.querySelector('.video-item2');
    var items3 = document.querySelector('.video-item3');
    var items4 = document.querySelector('.video-item4');
    var videoBg = document.querySelector('.idx-video-bg');
    var videoBox = document.querySelector('.idx-video-box');
    var video_box1 = document.querySelector('.video-box1');
    var video_box2 = document.querySelector('.video-box2');
    var video_box3 = document.querySelector('.video-box3');
    var video_box4 = document.querySelector('.video-box4');
    var close = document.querySelector('.close');
    var video1 = document.querySelector('.video1');
    var video2 = document.querySelector('.video2');
    var video3 = document.querySelector('.video3');
    var video4 = document.querySelector('.video4');

    items1.onclick = function() {
        videoBg.style.display = 'block';
        videoBox.style.display = 'block';
        video_box1.style.display = 'block';
        video_box2.style.display = 'none';
        video_box3.style.display = 'none';
        video_box4.style.display = 'none';
    }
    items2.onclick = function() {
        videoBg.style.display = 'block';
        videoBox.style.display = 'block';
        video_box1.style.display = 'none';
        video_box2.style.display = 'block';
        video_box3.style.display = 'none';
        video_box4.style.display = 'none';
    }
    items3.onclick = function() {
        videoBg.style.display = 'block';
        videoBox.style.display = 'block';
        video_box1.style.display = 'none';
        video_box2.style.display = 'none';
        video_box3.style.display = 'block';
        video_box4.style.display = 'none';
    }
    items4.onclick = function() {
        videoBg.style.display = 'block';
        videoBox.style.display = 'block';
        video_box1.style.display = 'none';
        video_box2.style.display = 'none';
        video_box3.style.display = 'none';
        video_box4.style.display = 'block';
    }
    close.addEventListener('click', function() {
        videoBg.style.display = 'none';
        videoBox.style.display = 'none';
        video1.pause();
    })
    close.addEventListener('click', function() {
        videoBg.style.display = 'none';
        videoBox.style.display = 'none';
        video2.pause();
    })
    close.addEventListener('click', function() {
        videoBg.style.display = 'none';
        videoBox.style.display = 'none';
        video3.pause();
    })
    close.addEventListener('click', function() {
        videoBg.style.display = 'none';
        videoBox.style.display = 'none';
        video4.pause();
    })


    // 操作登录
    var UserLogin = document.querySelector('.UserLogin');
    var UserExit = document.querySelector('.UserExit');
    var css1 = document.querySelector('.css1');
    var right = document.querySelector('.right');
    var right2 = document.querySelector('.right2');
    UserLogin.addEventListener('click', function() {
        css1.href = 'css/car.css';
        right2.style.display = 'block';
        right.style.display = 'none';
        alert('登录成功！');
    })
    UserExit.addEventListener('click', function() {
        css1.href = 'css/nocar.css';
        right2.style.display = 'none';
        right.style.display = 'block';
        alert('退出成功！');
    })










})